<template>
    <div class="switch-control">
        <div class="switch-control-item" v-for=" swConfig, i in turnoutStates" :key="i">
            <p style="margin-right: 12px; min-width: 200px; max-width: 200px; text-align: right;"> {{
                swConfig.config.name }} </p>
            <template v-if="swConfig.config.type === 'left_hand_turnout'">
                <el-button :type="swConfig.state === 'left' ? 'primary' : 'default'" @click="setSwitch(i, 'left')"
                    :icon="TopLeft">左侧</el-button>
                <el-button :type="swConfig.state === 'normal' ? 'primary' : 'default'" @click="setSwitch(i, 'normal')"
                    :icon="Top">正线</el-button>
            </template>
            <template v-else-if="swConfig.config.type === 'right_hand_turnout'">
                <el-button :type="swConfig.state === 'normal' ? 'primary' : 'default'" @click="setSwitch(i, 'normal')"
                    :icon="Top">正线</el-button>
                <el-button :type="swConfig.state === 'right' ? 'primary' : 'default'" @click="setSwitch(i, 'right')"
                    :icon="TopRight">右侧</el-button>
            </template>
            <template v-else-if="swConfig.config.type === 'bilateral_turnout'">
                <el-button :type="swConfig.state === 'left' ? 'primary' : 'default'" @click="setSwitch(i, 'left')"
                    :icon="TopLeft">左侧</el-button>
                <el-button :type="swConfig.state === 'right' ? 'primary' : 'default'" @click="setSwitch(i, 'right')"
                    :icon="TopRight">右侧</el-button>
            </template>
            <template v-else-if="swConfig.config.type === 'three_row_turnout'">
                <el-button :type="swConfig.state === 'left' ? 'primary' : 'default'" @click="setSwitch(i, 'left')"
                    :icon="TopLeft">左侧</el-button>
                <el-button :type="swConfig.state === 'normal' ? 'primary' : 'default'" @click="setSwitch(i, 'normal')"
                    :icon="Top">正线</el-button>
                <el-button :type="swConfig.state === 'right' ? 'primary' : 'default'" @click="setSwitch(i, 'right')"
                    :icon="TopRight">右侧</el-button>
            </template>
            <template v-else>
                暂不支持此种道岔：{{ swConfig.config.type }}
            </template>

        </div>
    </div>
</template>
<script lang="ts" setup>
import { defineProps, ref, onBeforeMount } from "vue"
import { ElButton } from "element-plus";
import { TopLeft, TopRight, Top } from "@element-plus/icons-vue"
import { WSSwitchControlMsg } from "../../messages"
import { send } from "../../ws"
import { Turnout, TURNOUT_STATES } from "../../models"
import { loadTurnouts } from "../../api"

interface TurnoutState {
    config: Turnout
    state: TURNOUT_STATES
}

const props = defineProps({
    x595Num: { type: Number, required: true }
})
const turnoutStates = ref<TurnoutState[]>(
    [{
        config: {
            name: "aaaaaa",
            type: "left_hand_turnout",
            magnets: []
        }, // 电磁铁反向驱动
        state: "normal" // 定位和反位
    },
    {
        config: {
            name: "aaaaaa",
            type: "right_hand_turnout",
            magnets: []
        }, // 电磁铁反向驱动
        state: "normal" // 定位和反位
    },
    {
        config: {
            name: "aaaaaa",
            type: "bilateral_turnout",
            magnets: []
        }, // 电磁铁反向驱动
        state: "right" // 定位和反位
    }
    ]
)

const getSwitchStatus = (reversed: boolean, state: TURNOUT_STATES): "A" | "B" => {
    if (!reversed) {
        return state === "normal" ? "A" : "B"
    } else {
        return state === "normal" ? "B" : "A"
    }
}

const setSwitch = (index: number, state: TURNOUT_STATES) => {
    turnoutStates.value[index].state = state
    const data: WSSwitchControlMsg = {
        "type": "switch",
        "state": getSwitchStatus(turnoutStates.value[index].config.magnets[0].reversed, state),
        "switch_index": index,
        "control_name": "GroundController1"
    };
    send(JSON.stringify(data))

}

const createInitialState = (config: Turnout): TURNOUT_STATES => {
    if (config.type == "left_hand_turnout" || config.type == "right_hand_turnout" || config.type == "three_row_turnout") {
        return "normal"
    } else if (config.type == "bilateral_turnout") {
        return "left"
    } else {
        throw Error(`Unknown turnout type ${config.type}`)
    }
}

onBeforeMount(async () => {
    const turnouts = (await loadTurnouts()).map((turnoutConfig) => {
        return {
            config: turnoutConfig,
            state: createInitialState(turnoutConfig),
        }
    })
    turnoutStates.value = turnouts
})

</script>
<style>
.switch-control {
    display: flex;
    flex-direction: column;
}

.switch-control-item {
    display: flex;
    flex-direction: row;
    justify-content: left;
    align-items: center;
}
</style>